<template>
    <div>
      <ECharts :chartId="'radarChart'" :options="chartOptions" />
    </div>
  </template>
  
  <script>
  import ECharts from './getCost/ECharts.vue';
  import axios from 'axios'; // 确保引入 axios
  import { Message } from 'element-ui'; 
  
  export default {
    components: {
      ECharts
    },
    data() {
      return {
        chartData: {
          paid: { 7: 0, 8: 0, 9: 0, 10: 0, 11: 0, 12: 0 },
        },
        chartOptions: {
          title: {
            text: '缴费项目订单统计',
            right: '0'
          },
          tooltip: {
            trigger: 'item'
          },
          radar: {
            indicator: [
              { name: '电费单', max: 13 },
              { name: '宽带费单', max: 13 },
              { name: '物业费单', max: 13 },
              { name: '天然气费单', max: 13 },
              { name: '水费单', max: 13 },
              { name: '非固定月单', max: 13 }
            ]
          },
          series: [
            {
              name: '缴费项目',
              type: 'radar',
              areaStyle: { // 填充雷达图区域
                opacity: 0.5, // 透明度
                color: '#3398DB' // 填充颜色
              },
              lineStyle: { // 设置线条样式
                width: 2, // 线条宽度
                color: '#3398DB' // 线条颜色
              },
              data: [
                {
                  value: [0, 0, 0, 0, 0, 0],
                  name: '缴费项目'
                }
              ]
            }
          ]
        }
      };
    },
    methods: {
      async getCostData(parkname) {
        try {
          const { data: res } = await axios.get(
            `cost/getCostData?c_id=${parkname}&currPage=1&pageNum=4`
          );
        //   console.log(res);
          this.chartData.paid[parkname] = res.total;
          this.updateChartOptions();
        } catch (error) {
          console.error(error);
          Message.error("请求失败: " + error.message); // 使用 element-ui 的 Message 组件
        }
      },
      async fetchhouseData() {
        const parknames = [7, 8, 9, 10, 11, 12];
        for (const parkname of parknames) {
          await this.getCostData(parkname);
        }
      },
      updateChartOptions() {
        this.chartOptions.series[0].data[0].value = [
          this.chartData.paid['7'],
          this.chartData.paid['8'],
          this.chartData.paid['9'],
          this.chartData.paid['10'],
          this.chartData.paid['11'],
          this.chartData.paid['12']
        ];
      }
    },
    mounted() {
      this.fetchhouseData();
    }
  };
  </script>
  
  <style scoped>
  /* 您可以在这里添加样式 */
  </style>